<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监视属性04</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>


<body>
<!-- 准备好 一个容器-->
<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

</body>



<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    data:{
      isHot:true,

    },
    methods:{
      changeWeather(){
        this.isHot = !this.isHot
      }
    },
    computed:{
      info(){
        return  this.isHot ?'炎热':'寒冷'
      }
    },
    watch:{

      // isHot:{
      //   // immediate:true, // 初始化时让 handler调用一次
      //   // deep:true,
      //   //当isHot发生改变时，handler被调用
      //   handler(newValue,oldValue){
      //     console.log('isHot被改变为'+this.info,newValue,oldValue)
      //   }
      // },

      //当配置项中只有handler时可以简写
      // isHot(){
      //   console.log('isHot')
      // }


    }
  })


  //完整正常写法
  // vm.$watch('isHot',{
  //     // immediate:true, // 初始化时让 handler调用一次
  //     // deep:true,
  //     //当isHot发生改变时，handler被调用
  //     handler(newValue,oldValue) {
  //       console.log('isHot被改变为' + this.info, newValue, oldValue)
  //     }
  // })

  vm.$watch('isHot',function(){
    console.log('isHot被改变了')
  })

</script>
</html>
